<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% include 'menu.html' %}

{#<ul>#}
{#    {% for i in address %}#}
{#        <li>  {{ i.name }}</li>#}
{#    {% endfor %}#}
{#</ul>#}

<div id="order_div" style="width: 30%;margin-left: 30%">
    <h3 style="text-align: center">请输入构造房源的相关数据</h3> <br>

    <div class="form-group">
        <label class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="input_username"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="input_userpwd"/>
            <span id="pwd_error" style="color: red;display: none">用户名或密码错误</span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label><input type="checkbox"/>Remember me</label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>

    <hr style="width:1000PX;height:20px;">
    <h3 style="text-align: center">默认选填数据</h3> <br>
    <div class="form-group">
        <label class="col-sm-2 control-label">房源标题</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="order_name"/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">出租单价</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="order_price"/>
        </div>
    </div>
    <br><br>
{# 单选和多选的value 要和公司内部接口返回的数据保持一致#}
    <div id="people" style="text-align: center;margin-top: 50px">
        <span>入住人数：  </span>
        <label>
            <input type="radio" name="people_counts" value="1" checked> 1人
        </label>
        <label>
            <input type="radio" name="people_counts"  value="2">2人
        </label>
    </div>
    <br>
    {#          多选#}
    <div style="text-align: center;margin-top: 50px">
        <span>配套设施：</span>
        <label class="checkbox-inline">
            <input type="checkbox" name="furniture"  value="tv"> 电视
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" name="furniture"  value="tefrigerator"> 冰箱
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" name="furniture" value="air-conditioner"> 空调
        </label>
        <label class="radio-inline">
            <input type="radio" name="optionsRadiosinline"  value="option1" checked> 选项 1
        </label>
        <label class="radio-inline">
            <input type="radio" name="optionsRadiosinline"  value="option2"> 选项 2
        </label>
    </div>
    <br><br>
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">选择列表</label>
        <div class="col-sm-10">
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
    <br><br>
    <div style="text-align: center;">
        <span style="color: #78122e">地区：</span>
        <select id="city" style="width: 300px;height: 40px">
            {% for i in address %}
                <option value="{{ i.name }}">{{ i.name }}</option>
            {% endfor %}
        </select>
    </div>
    <br>



    <div style="margin-top: 30px;text-align: center">
        <span style="color: #78122e">国家：</span>
        <datalist id="country_list">
            <option value="China">中国</option>
            <option value="English">英国</option>
            <option value="USA">美国</option>
        </datalist>
        <input id="country" value="China" list="country_list" autocomplete="off" type="text"
               style="width: 300px;height: 40px">

    </div>

</div>

{# 构造按钮 #}
{# 步骤列表 #}
<div style="z-index: 900;width: 200px;height: 100%;background: linear-gradient(to bottom,#5da6d2,#a9b8c1);position: fixed;left: 0;top:50px;padding: 10px;
            box-shadow: 4px 4px 6px darkgray;overflow-y: auto">
    <button id="run_btn" onclick="run()" class="btn"
            style="font-size: large;height: 40px;width: 100%;color: #5668e3;background-color: white">开始构造
    </button>
    <br>
    <br><textarea name="" id="res_txt" style="width: 100%;background-color: #f6f6f6" rows="7"
                  placeholder="构造结果如下:"></textarea>
    <h5 style="color: #0b0c0c">房源步骤列表：   <a href="/add_step/{{ GM_tool_id }}/"><span style="font-size: xx-small;color: black">点此增加步骤</span></a></h5>
    {% for i in steps %}
        {{ i.order }} : <a target="_blank" href="/admin/myapp/db_gm_steps/{{ i.id }}/change/">{{ i.name }}</a><br>
    {% endfor %}
</div>

{# 验证输入的数据规范#}
<script>
    $(function () {
        $("#input_userpwd").blur(function () {
            // alert( $("#input-userpwd").val())
            $.get('/GM_tools/order_check_user/', {
                "username": $("#input_username").val(),
                "password": document.getElementById("input_userpwd").value
            }, function (ret) {
                if (ret.errCode == 0) {
                    $("#pwd_error").hide()
                } else {
                    $("#pwd_error").show()
                }
            })
        })
    })

</script>

{# 开始构造#}
<script>
    function run() {

        document.getElementById('run_btn').innerText='构造中...'

        // 收集页面所有数据
        var input_username = document.getElementById("input_username").value;
        var input_userpwd =document.getElementById("input_userpwd").value;
        console.log(input_username, input_userpwd)
        var order_name = $('#order_name').val();
        var order_price = $('#order_price').val();

        // 单选框获取(js版)

        {#var radio_people_counts = document.getElementsByName("people_counts")#}
        {#for (var i = 0; i < radio_people_counts.length; i++) {#}
        {#    if (radio_people_counts[i].checked == true) {#}
        {#        var people_counts = radio_people_counts[i].value;#}
        {#    }#}
        {#   }       #}

        // 单选框获取(jq版)
        var people_counts = $("#people input[name='people_counts']:checked").val();

        // 多选
        var furniture = []
        $("input[name='furniture']:checked").each(
            function () {
                furniture.push($(this).val())
            }
        )
        {#console.log(furniture);#}

        // 下拉框
        var city = document.getElementById('city').value;
       // console.log(city);

        var country =$("#country").val()


        // 向后台发送构造请求
        $.get("/GM_tools/order_run/", {
            "input_username":input_username,
            "input_userpwd":input_userpwd,
            "order_name":order_name,
            "order_price":order_price,
            "people_counts":people_counts,
            "furniture":furniture.toString(),
            "city":city,
            "country":country,
        },function (ret) {
            //console.log(ret)
            // 把最后的结果显示出来,后端返回的 ret 为一个字典
            var rl = '';
            for (var i in ret){
                rl += i + ":" + ret[i] + '\n'

            }
            document.getElementById('res_txt').value = rl

            document.getElementById('run_btn').innerText='构造完成'
        })



    }
</script>

</body>
</html>
